<template>
  <div>
    <div class="cart-box">
      <div class="cart-item" v-for="item in targetList" :key="item.storeId" ref="cart">
        <div class="hd mui-table-view-cell">
          <!-- v-model="storeFlag" 相同的话，v-for渲染出来，按一个就联动了同值的 -->
          <!-- <mt-switch v-model="$store.getters.storeSelect(item.storeId)" 
          @change="storeSelect(item.storeId,$store.getters.storeSelect(item.storeId))"
          ></mt-switch>-->
          <span class="mui-icon-extra mui-icon-extra-hotel"></span>
          <router-link :to="'/home/storeDetail/'+ item.storeId" class="storeName" tag="span">
            {{ item.storeName}}
            <span class="mui-icon mui-icon-arrowright"></span>
          </router-link>
        </div>
        <ul class="bd">
          <li
            class="mui-table-view-cell goods-item mui-transitioning mui-selected"
            v-for="value in item.goodsList"
            :key="value.goodsId"
          >
            <div class="mui-slider-right mui-disabled mui-selected">
              <a class="mui-btn mui-btn-red" @click="deleteItem($event,value.goodsId)">删除</a>
            </div>
            <!-- change事件获取的是v-model绑定的值 -->
            <div class="mui-slider-handle">
              <mt-switch
                v-model="$store.getters.getItemStatus[value.goodsId]"
                @change="updateStatus(value.goodsId,$store.getters.getItemStatus[value.goodsId])"
              ></mt-switch>
              <div class="right-box">
                <router-link :to="'/home/itemDetail/'+ value.gid" class="right-up" tag="div">
                  <div class="imgBox">
                    <img src alt>
                  </div>
                  <div class="detail">
                    <p>{{ value.goodsName}}</p>
                    <div class="selectBox" @click.prevent="getSelectBox(value.gid,value.goodsId)">
                      <!-- value.color是只有一对键值对的对象直接点出来即可 -->
                      <span>
                        {{value.color.cvalue}}
                        <i v-if="value.size">{{value.size.svalue}}</i>
                        <i class="mui-icon mui-icon-arrowdown"></i>
                      </span>
                    </div>
                  </div>
                </router-link>
                <div class="right-down">
                  <div class="price">
                    <span>￥</span>
                    <b>{{ value.price}}</b>
                  </div>
                  <div class="number">
                    <numberBox
                      :p_stock="value.stock"
                      :p_goodsId="value.goodsId"
                      :p_goodsNum="$store.getters.getItemNum[value.goodsId]"
                    ></numberBox>
                    <!-- el内的change方法不能传参，传参则无法获取numberBox内的值,将v-model的值传进去即可 -->
                    <!-- <el-input-number
                    v-model="$store.getters.getItemNum[value.goodsId]"
                    @change="changeNum(value.goodsId)"
                    :min="1"
                    :max="value.stock"
                    :label="value.goodsId"
                    size="mini"
                    ref="input"
                    ></el-input-number>-->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="sum" v-show="selectBoxFlag?false:true">
        <div class="mui-table-view-cell">
          <!-- Error in v-on handler: "TypeError: Cannot set property 
          allSelect of #<Object> which has only a getter"-->
          <!-- 解决在vuex实例中返回一个对象，而不是一个string -->
          <!-- mint/element 的change方法返回的是v-bind的值，当这个值需要从vuex中获取时，函数的参数也写一样的即可 -->
          <mt-switch
            v-model="$store.getters.allSelect.flag"
            @change="selectAll($store.getters.allSelect.flag)"
          ></mt-switch>
          <span>全选/不选</span>
        </div>
        <div class="right">
          <span>合计：</span>
          <span>￥</span>
          <b>{{ $store.getters.getTotalCost}}</b>
          <span>结算({{ $store.getters.getTotalCount}})</span>
        </div>
      </div>
      <transition enter-active-class="fadeIn" leave-active-class="fadeOut" :duration="100">
        <selectBox
          class="animated"
          v-if="selectBoxFlag"
          @p_close="closeSelectBox"
          :clickId="p_gid"
          :p_origin_goodsId="origin_goodsId"
          @p_updateChioce="updateChioce"
        ></selectBox>
      </transition>
    </div>
  </div>
</template>

<script>
import selectNumber from "../subcomponents/selectNumber.vue";
import mui from "../../lib/mui/js/mui.min.js";
import goodsSelectBox from "../subcomponents/cartGoodsSelectBox.vue";
import animate from "animate.css";
export default {
  data() {
    return {
      title: "购物车",
      targetList: [],
      selectBoxFlag: false,
      p_stock: "",
      p_goodsNum: "",
      p_goodsId: "",
      storeFlag: true,
      p_gid: "",
      clickId: "",
      statusObj: {},
      deleteFlag: false,
      timerId: "",
      origin_goodsId: "",
      p_origin_goodsId: "",
      ids: this.$store.getters.getItemIdArr
    };
  },

  created() {
    this.login();
    this.showTitle(this.title);
    this.getList()
    // this.getCartList();
  },
  mounted() {
    mui.init();
  },
  methods: {
    showTitle(title) {
      this.$emit("getTitle", title);
    },
    login() {
      this.$emit("checkin");
    },

    // bug 每次进入购物车，列表重复渲染，列表时变化了，未进入方法中就已经复制列表==========
    // 页面刷新以下数据就是正常的，若不刷新，数据会一直重复增加，==》mock.js中设置获取时判断，不添加重复的元素
    getList(){
      if (this.ids.length <= 0) return;
      var url = "/cartData"
      var id = this.$qs.stringify({id : this.ids.toString()})
      this.$http.post(url,id).then(res=>{
        this.targetList = res.data;
        // console.log(res)
      }).catch(error =>{
        // 处理error
      })
    },
    
   
    // 点击打开参数选择
    getSelectBox(gid, goodsId) {
      this.p_gid = gid;
      this.origin_goodsId = goodsId;
      this.selectBoxFlag = true;
    },
    // 关闭参数选择
    closeSelectBox() {
      this.selectBoxFlag = false;
    },
    // 选中状态的改变
    updateStatus(id, value) {
      this.statusObj.goodsId = id;
      this.statusObj.checked = value;
      this.$store.commit("updateItemStatus", this.statusObj);
      // console.log(id+"=========="+value);
    },
    // 更换颜色尺码选择
    updateChioce(id) {
      
      // 改变后即使获取到数据
      this.getList();
      this.$nextTick(()=>{
        
      })
      // 不加reload,修改后，数据更新，但页面未刷新
      location.reload();
      
    },
    // 全选/全不选
    selectAll(value) {
      this.$store.commit("selectAllOrNot", value);
    },
    // 删除项目
    deleteItem(e, id) {
      // console.log(id)
      var itemLi = e.target.parentElement.parentElement;
      // var goodsList =
      mui.confirm("确认删除该物品么？", message => {
        // mui的删除确认框，删除message.index为1，取消为0
        if (message.index == 1) {
          // 遍历店铺列表
          this.targetList.some((item, i) => {
            // 遍历店铺列表里的商品列表
            item.goodsList.some((ele, j) => {
              // 找到删除项的id相同项
              if (ele.goodsId == id) {
                // 删除该项
                item.goodsList.splice(j, 1);
                // 判断店铺列表是否还有商品，没有就将店铺项一并删除
                if (item.goodsList.length == 0) {
                  this.targetList.splice(i, 1);
                  // 在some最里面结束即return
                  return true;
                }
              }
              // return true
            });
          });
          this.$store.commit("deleteCartItem", id);
          // this.$nextTick(()=>{
          //   this.getList()
          // })
          location.reload();
        } else {
          // 将拉出来的元素恢复原位
          mui.swipeoutClose(itemLi);
        }
      });
    }
  },
  components: {
    numberBox: selectNumber,
    selectBox: goodsSelectBox
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.cart-box {
  margin: 10px 10px 60px;
  overflow-y: auto;
  .mint-switch {
    display: inline-block;
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
  }
  .cart-item {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 5px;
    .mui-table-view-cell {
      padding: 10px 5px;
    }
    .mui-table-view-cell.mui-active {
      background: none;
    }
    .mui-table-view-cell:after {
      height: 0;
    }
    .hd {
      .storeName {
        padding-left: 10px;
      }
      span {
        font-size: 16px;
      }
      .mui-icon-extra-hotel {
        color: #999;
      }
    }
    .bd {
      .mint-switch {
        top: 40%;
      }

      .goods-item {
        display: flex;
        flex-direction: row;
        position: relative;
        .right-box {
          margin-left: 55px;
          position: relative;
          .right-up {
            display: flex;
            flex-direction: row;
            .imgBox {
              flex: 40%;
              height: 80px;
              background: sandybrown;
            }
            .detail {
              padding: 0 10px;
              p {
                color: #000;
                font-size: 14px;
                margin: 0;
              }
              .selectBox {
                font-size: 12px;
                margin: 5px 0;
                position: absolute;
                // left: 85px;
                left: 33%;
                top: 42px;
                span {
                  padding: 5px;
                  color: #999;
                  background: #eee;
                  .mui-icon.mui-icon-arrowdown {
                    font-size: 12px;
                  }
                  i {
                    font-style: normal;
                  }
                }
              }
            }
          }
          .right-down {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 5px 0;
            padding-left: 30%;
            .price {
              color: red;
            }
            .number {
              line-height: 1;
              vertical-align: middle;
              .el-input-number--mini {
                width: 90px;
              }
            }
          }
        }
      }
    }
  }
}
.sum {
  width: 100%;
  background: #fff;
  padding: 5px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  vertical-align: middle;
  position: fixed;
  bottom: 50px;
  left: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  z-index: 880;
  .mint-switch {
    left: 0;
  }
  .mui-table-view-cell.mui-active {
    background: none;
  }
  .mui-table-view-cell {
    padding-left: 55px;
    &::after {
      height: 0;
    }
  }
  .right {
    b {
      color: red;
    }
    span {
      &:nth-of-type(2) {
        color: red;
      }
      &:last-of-type {
        display: inline-block;
        padding: 10px;
        background: $baseColor;
        color: #fff;
        border-radius: 10px;
      }
    }
  }
}
</style>